<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="./res/layui-v2.8.17/layui/css/layui.css">

</head>
<body>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>品牌新增</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md5">
            <form id="form1" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 选择本地图片
                        </button>
                        <!--文件选择控件-->
                        <input type="file" id="logoFile" name="imgLogo" style="display: none">
                        <div style="width: 132px;">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                <div id="ID-upload-demo-text"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" class="layui-input" lay-verify="required" lay-reqtext="品牌名不能为空" lay-vertype="tips" placeholder="请输入品牌名称">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: right">
                   <button type="button" id="submitBtn" class="layui-btn layui-bg-blue" lay-submit lay-filter="submitBtn">确定添加</button>
                </div>
            </form>
        </div>
    </div>

  <script src="./res/layui-v2.8.17/layui/layui.js"></script>
    <script>
        layui.use(['jquery'],function(){
            let $ = layui.jquery;
            //加载上传组件
            let upload = layui.upload;
            let form = layui.form;

            //文件上传组件配置
            upload.render({
                elem:'#ID-upload-demo-btn',
                url:'http://localhost/iov/brand/add',
                auto:false,  //禁止文件自动上传
                field:'imgLogo', //设置文件域名称，后端接收文件使用属性名
                data:{
                    name:function(){
                        return $('#name').val();
                    }
                },
                bindAction:'#submitBtn',
                choose:function(obj){
                    obj.preview(function(index,file,result){
                        //图片预览
                        $('#ID-upload-demo-img').attr('src',result);
                    })
                },
                done:function(res,index,upload){
                    if(res.code === 0){
                        layer.msg(res.msg,function(){
                            $(window.parent.document.getElementById('content')).load('brand-list.html');
                            $(window.parent.document.getElementById('blist')).click();
                        })
                    }
                }
            })
        })
    </script>
</body>
</html>